<template>
	<view class="container content">
		<view class="content_user">
			订单号：{{ordrNumber}}
		</view>
		<view>
			<up-form labelPosition="left" ref="form">

				<up-form-item label="投拆内容" borderBottom>
					<up-textarea v-model="formData.content" placeholder="很抱歉，让你遇到不愉快的体验，请填写要投拆的内容，我们会尽快为你处理。"
						count></up-textarea>
				</up-form-item>

				<up-form-item label="图片">
					<up-upload :fileList="imagesList" @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="10" accept="all"></up-upload>
				</up-form-item>


			</up-form>
		</view>
		<view class="footer">
			<up-button type="primary" color="linear-gradient(to right, rgb(216, 0, 0), rgb(213, 90, 2))" :loading="loading" text="提交" @click="ontoushu"></up-button>
		</view>
	</view>
</template>

<script>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		complaintApi
	} from '@/api/order.js'
	import basUrl from "@/config/config.js"
	import {
		Upload
	} from "@/utils/upload.js"
	import {
		reactive,
		toRefs
	} from 'vue';
	export default {
		setup() {
			let state = reactive({
				ordrNumber: 'E1256879',
				content: "",
				loading: false,
				imagesList: [],
				formData: {
					content: '',
					orderId: '',
					images: '',
				},
			})
			onLoad((option) => {
				state.ordrNumber = option.orderNo
				state.formData.orderId = option.orderId
			})
// 删除图片
			const deletePic = (event) => {
				state.imagesList.splice(event.index, 1);
			};

			// 新增图片
			const afterRead = async (event) => {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				console.log(lists)
				let fileListLen = state.imagesList.length;
				lists.map((item) => {
					state.imagesList.push({
						...item,
						status: 'uploading',
						message: '上传中',
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await Upload(lists[i].url);
					let item = state.imagesList[fileListLen];
					state.imagesList.splice(fileListLen, 1, {
						...item,
						status: 'success',
						message: '',
						url: basUrl.baseURL + result,
						imgUrl: result,
					});
					fileListLen++;
				}
			}

			const ontoushu = async () => {
				if(!state.formData.content){
					uni.$u.toast("请填写要投拆内容");
					return false
				}
				state.loading=true
				if (state.imagesList.length > 0) {
					let arr = state.imagesList.map((item) => item.imgUrl)
				
					state.formData.images = JSON.stringify(arr)
				}
				try{
					await complaintApi(state.formData)
					uni.$u.toast("投诉成功，请等待处理结果！");
					uni.reLaunch({
						url:'/pages/index/index'
					})
					state.loading=false
				}catch{
					state.loading=false
				}
				
			}
			return {
				...toRefs(state),
				ontoushu,
				afterRead,
				deletePic,
			}
		}
	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style scoped lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		/* 纵向排列子元素 */

		/* 如果需要的话，尝试使容器高度为屏幕高度 */
	}

	.content_user {

		height: 80rpx;
		line-height: 80rpx;
	}

	.content {

		padding: 20rpx 40rpx;
		background-color: #fff;
	}

	.footer {
		font-size: 22rpx;
		padding: 20rpx;
		position: fixed;
		display: flex;
		/* 固定定位 */
		bottom: 0;
		left: 0;
		/* 底部对齐 */
		width: calc(100% - 40rpx);
		/* 宽度100% */
		/* 使用Flex布局 */
		height: 100rpx;
		background-color: #fff;

	}
</style>